<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page,index) of pages" :key="index">
                <div class="nav-mondel">
                    <div class="nav" v-for="item of page" :key="item.id">
                        <div>
                           <img class="icon-img" :src="item.imgURL" alt=""> 
                        </div>
                        <div class="content">{{item.content}}</div>
                    </div>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name:"navSwiper",
    data(){
        return{
            swiperOption:{
                pagination:".swiper-pagination"
            },
            swiperList:[
            {
                id:'0010',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                content:"景点门票"
            },
            {
                id:'0011',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
                content:"北京必游"
            },
            {
                id:'0012',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                content:"一日游"
            },
            {
                id:'0013',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
                content:"文化古迹"
            },
            {
                id:'0014',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
                content:"动植物园"
            },
            {
                id:'0015',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png",
                content:"故宫"
            },
            {
                id:'0016',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png",
                content:"野生动物园"
            },
            {
                id:'0017',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
                content:"泡温泉"
            },
            ,  
            {
                id:'0018',
                imgURL:"https://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
                content:"打卡圣地"
            },
            {
                id:'0019',
                imgURL:"http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png",
                content:"全部玩乐"
            },
            ]    
            
        }        
    },
    computed:{
        pages(){
            let pages = []
            this.swiperList.forEach((item,index) => {
                let page = Math.floor(index/8)
                if(!pages[page]){
                    pages[page]=[]
                }
                pages[page].push(item) 
            })  
            return pages
        }
    }
}
</script>

<style scoped lang="stylus">
    .wrapper >>> .swiper-pagination
        position:static
    .wrapper >>> .swiper-pagination-bullet
        width:.12rem
        height:.12rem
    .wrapper >>> .swiper-pagination-bullet-active    
        background:rgba(0,175,190,.8)
    .wrapper
        padding-top:5px 
        width:100%
        height:3.7rem
        background:#fff
        .nav-mondel
            text-align:center
            display:flex
            flex-wrap:wrap
            .nav
                width:1.86rem
                .content
                    margin:.1rem 0
                .icon-img
                    width:1.1rem
                    height:1.1rem
</style>


